<template>
  <view class="main" v-if="otherPage !== '1'">
    <CommonTitle title="您所在的行业" />
    <view class="sub">一年最多修改 {{ industry_modify_max_count }} 次，请谨慎选择</view>
  </view>
  <view class="main con">
    <view class="box" v-for="(item, index) in industryList" :key="index">
      <view class="title">{{ item.name }}</view>
      <view class="itemBox">
        <view v-for="(i, index) in item.list" :class="{ item: true, active: i.isActive }" @click="itemClick(i)" :key="index">{{ i.name }}</view>
      </view>
    </view>
    <view class="buttomBox">
      <u-button color="#1676fc" shape="circle" @click="submit">立即提交</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonTitle from "../../components/commonTitle.vue";
import { configKey, createMyIndustry, getIndustryList, getMyIndustry } from "@/api/my";
import { usePostStore } from "@/stores/post";
const industryList = ref<myTypes.indurstyList[]>([]);
const { otherPage } = defineProps<{
  otherPage: string;
}>();

const industry_modify_max_count = ref(0);
onMounted(async () => {
  const res3 = await configKey("industry_modify_max_count");
  industry_modify_max_count.value = res3.data;
  const res = await getIndustryList();
  res.data.forEach((item) => {
    item.list.forEach((i) => {
      i.isActive = false;
    });
  });
  if (otherPage !== "1") {
    const res2 = await getMyIndustry();
    res.data.forEach((item) => {
      res2.data.forEach((item2) => {
        if (item.id === item2.categoryId) {
          item.list.forEach((i) => {
            if (i.id === item2.industryId) {
              i.isActive = true;
            }
          });
        }
      });
    });
  }

  industryList.value = res.data;
});
const itemClick = (child: myTypes.indurstyChildList) => {
  let arr: any[] = [];
  industryList.value.forEach((item) => {
    item.list.forEach((i: any) => {
      if (i.isActive) {
        arr.push(i);
      }
    });
  });
  if (arr.length >= 5) {
    uni.showToast({
      title: "最多只可以选择5个行业",
      icon: "none",
    });
    return;
  }
  child.isActive = !child.isActive;
};
const submit = async () => {
  let arr: myTypes.activeIndustry[] = [];
  industryList.value.forEach((item) => {
    item.list.forEach((i) => {
      if (i.isActive) {
        let obj = {
          industryId: i.id,
          industryName: i.name,
          categoryId: item.id,
          categoryName: item.name,
        };
        arr.push(obj);
      }
    });
  });
  if (otherPage === "1") {
    usePostStore().setSelectIndustry(arr);
    uni.navigateBack();
  } else {
    await createMyIndustry(arr);
    uni.showToast({
      title: "操作成功",
    });
  }
};
</script>

<style lang="less" scoped>
.sub {
  font-size: 28rpx;
  color: #bebebe;
  line-height: 46rpx;
}
.con {
  background: #fff;
  padding-bottom: 120rpx;
  .box {
    .title {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #1e1e1e;
      line-height: 44rpx;
    }
    .itemBox {
      display: flex;
      flex-wrap: wrap;
      margin: 26rpx 0;
      .item {
        background: #f7f7f7;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #1e1e1e;
        line-height: 46rpx;
        padding: 18rpx 38rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
      .active {
        background: #e8f1fe;
        color: #1676fd;
      }
    }
  }
}
</style>
